<template>
  <div class="myTabbar">
    <van-tabbar active-color="#10a266" v-model="active" class="tabbarBox">
      <van-tabbar-item to="/home" name="home">
        <span>首页</span>
        <img slot="icon" slot-scope="props" :src="props.active ? tabbarIcons[0].active : tabbarIcons[0].normal" />
      </van-tabbar-item>
      <van-tabbar-item @click="lettersVisits('/conMediation')" name="transfer">
        <span>信访调解</span>
        <img slot="icon" slot-scope="props" :src="props.active ? tabbarIcons[1].active : tabbarIcons[1].normal" />
      </van-tabbar-item>
      <van-tabbar-item class="tabbarItem" @click="skiprouter('/knockOut')" name="tabbarItem">
        <span>我要报事</span>
        <img class="tabbarIcon" slot="icon" src="@/assets/newhome/566.png" />
      </van-tabbar-item>
      <van-tabbar-item @click="toOther" name="activity">
        <span>我要办事</span>
        <img slot="icon" slot-scope="props" :src="props.active ? tabbarIcons[2].active : tabbarIcons[2].normal" />
      </van-tabbar-item>
      <van-tabbar-item @click="skiprouter('/my')" icon="setting-o" name="my">
        <span>我的</span>
        <img slot="icon" slot-scope="props" :src="props.active ? tabbarIcons[3].active : tabbarIcons[3].normal" />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
  export default {
    name: "myTabbar",
    data() {
      // console.log('this.$route.meta', this.$route.name)
      return {
        active: this.$route.name,
        // 底部导航自定义Icon [{},{},{},{}]
        tabbarIcons: [{
            normal: require("../../assets/newhome/b1n.png"),
            active: require("../../assets/newhome/b1a.png")
          },
          {
            normal: require("../../assets/newhome/b2n.png"),
            active: require("../../assets/newhome/b2a.png")
          },
          {
            normal: require("../../assets/newhome/b3n.png"),
            active: require("../../assets/newhome/b3a.png")
          },
          {
            normal: require("../../assets/newhome/b4n.png"),
            active: require("../../assets/newhome/b4a.png")
          }
        ]
      };
    },
    methods: {
      ifAuth() {
        if (!this.slow.isAuth) {
        // if (!this.slow.isAuth || this.slow.userInfo.subscribe == 0) {
          this.$dialog
            .confirm({
              title: "提示",
              message: "您还没有认证，是否前去认证？"
            })
            .then(() => {
              this.$router.push("/register");
            })
            .catch(() => {
              // on cancel
              setTimeout(() => {
                this.$router.push("/home");
              }, 200);
            });
        }
      },
      skiprouter(path) {
        if (!this.slow.isAuth) {
        // if (!this.slow.isAuth || this.slow.userInfo.subscribe == 0) {
          this.$router.push("/register");
        } else {
          if (this.$route.name != 'home') {
            this.$router.replace(path);
            console.log("replace", path)
          } else {
            this.$router.push(path);
            console.log("push", path)
          }
        }
      },
      lettersVisits(path) {
        if (this.$route.name != 'home') {
          this.$router.replace(path);
          console.log("replace", path)
        } else {
          this.$router.push(path);
          console.log("push", path)
        }
      },
      toOther() {
        this.$router.push("/home");
        window.open("http://zwbweixin.dongying.gov.cn:8280/WeChat/index.html");
      }
    }
  };
</script>
<style lang="scss" scoped>
  @import "~@/smobile.scss";
  .myTabbar {
    .tabbarBox {
      .tabbarItem {
        justify-content: flex-end;
        margin-bottom: $sm-spacing-col-base;
        z-index: 2;
        .tabbarIcon {
          height: $sm-icon-px-lg !important;
        }
      }
    }
  }
</style>